<template>
  <div class="page">
    <h4>switch size</h4>
    <div class="item">
      <b-switch class="item" v-model="value2" size="large">
        <span slot="open">开启</span>
        <span slot="close">关闭</span>
      </b-switch>
      <b-switch class="item" v-model="value3">
        <span slot="open" class="set-switch">开</span>
        <span slot="close" class="set-switch">关</span>
      </b-switch>
      <b-switch class="item" v-model="value4" size="small">
        <span slot="open">开</span>
        <span slot="close">关</span>
      </b-switch>
    </div>
    <h4>switch disable</h4>
    <div class="item">
      <b-switch class="item" v-model="value" size="large" disabled />
      <b-switch class="item" v-model="value2" disabled />
      <b-switch class="item" v-model="value" size="small" disabled />
    </div>
    <h4>自定义宽度</h4>
    <div class="item">
      <b-switch class="item" v-model="value2" size="large" :width="82" />
      <b-switch class="item" v-model="value3" :width="62" />
      <b-switch class="item" v-model="value4" size="small" :width="32" />
    </div>
    <h4>自定义高度</h4>
    <div class="item">
      <b-switch class="item" v-model="value2" size="large" :height="40" />
      <b-switch class="item" v-model="value3" :height="28" />
      <b-switch class="item" v-model="value4" size="small" :height="24" />
    </div>
    <h4>自定义宽度高度、高度</h4>
    <div class="item">
      <b-switch class="item" v-model="value2" size="large" :width="150" :height="60">
        <span slot="open">开启</span>
        <span slot="close">关闭</span>
      </b-switch>
      <b-switch class="item" v-model="value3" :width="60" :height="28">
        <span slot="open">开启</span>
        <span slot="close">关闭</span>
      </b-switch>
      <b-switch class="item" v-model="value4" size="small" :width="50" :height="24">
        <span slot="open">开启</span>
        <span slot="close">关闭</span>
      </b-switch>
    </div>
  </div>
</template>
<script>
export default {
  name: "SwitchPage",
  data() {
    return {
      value: true,
      value2: false,
      value3: false,
      value4: false,
    };
  },
};
</script>
<style scoped>
.item {
  display: flex;
  justify-content: space-around;
}
.set-switch {
  font-size: 14px;
}
</style>